import React, { useEffect, useState} from 'react'
import "../pl/picture.css"
import { LeftOutline, SendOutline } from 'antd-mobile-icons'
import { Tabs } from 'antd-mobile'
import { useNavigate} from 'react-router-dom'
import axios from 'axios'
// const navigate = useNavigate()
export default function Picture() {
    const [travel, setTravel] = useState([])
    const getTravel = () => {
        axios.get("http://127.0.0.1:3000/dyx_index/dyx_travel").then(res => {
            if (res.data.code == 200) {
                setTravel(res.data.data)
            }
        })
    }
    useEffect(() => {
        getTravel()
    })
    return (
        <div>
            <div className='picture-box'>
                <LeftOutline style={{ width: "1.8rem", height: "2rem", marginLeft: "2rem" }}></LeftOutline>
                <p style={{ fontSize: "1.8rem" }}>故宫博物馆</p>
                <SendOutline style={{ width: "1.8rem", height:"2rem", marginRight: "2rem" }} />
            </div>
            <Tabs>
                <Tabs.Tab title='景点相册' key='fruits'>
                    <div className='picture-main'>
                        {
                            travel.map((item, index) => {
                                return <img src={item.img} key={index} style={{ width: "12rem", height: "12rem" }}></img>

                            })
                        }
                    </div>
                </Tabs.Tab>
                <Tabs.Tab title='游客评论' key='vegetables'>

                </Tabs.Tab>

            </Tabs>
        </div>
    )
}
